<template>
  <div class='comment_text'>
    <!-- 输入框 -->
    <textarea :placeholder="placeholderText" v-model='commentText'></textarea>
    <div>
      <!-- 发布与提交按钮 -->
      <slot name='but'></slot> 
    </div>
  </div>
</template>

<script>
  export default {
    // 接收占位符字体
    props:['placeholderText'],
    data() {
      return {
        commentText: '',
      }
    },
    updated() {
      // 获取输入框内容
      this.$store.state.inputText = this.commentText
    }
  }
</script>

<style scoped>
.comment_text {
  width: 100%;
  border: 2px solid #333;
  box-sizing: border-box;
}
.comment_text textarea {
  width: 100%;
  height: 45px;
  resize: none;
  border: none;
  outline: none;
  padding: 5px;
  margin: 0;
  box-sizing: border-box;
}
.comment_text>div {
  width: 100%;
  height: 25px;
  border-top: 1px solid #ccc;
  position: relative;
}
.comment_text>div>span {
  width: 50px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.comment_text>div>span:hover {
  background: #397;
}
</style>